<template>
    <div>
        <div class="control">
            <!-- 司机姓名 -->
            <div class="inputItem">
                <div class="title">司机姓名</div>
                <div class="inputBox">
                    <el-input v-model="driverName" @keyup.enter.native="getDriverList1">
                    </el-input>
                </div>
            </div>
            <!-- 手机号 -->
            <div class="inputItem">
                <div class="title">手机号</div>
                <div class="inputBox">
                    <el-input v-model="phone" @keyup.enter.native="getDriverList1">
                    </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">接单城市</div>
                <div class="inputBox">
                    <el-input v-model="cityValue" @keyup.enter.native="getDriverList1">
                    </el-input>
                </div>
            </div>
            <div class="inputItem">
                <div class="title">加入时间</div>
                <el-date-picker size="small" v-model="createTime" type="datetimerange" :picker-options="pickerOptions"
                    range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" align="right"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </div>

            <!-- 认证状态 -->
            <!-- <div class="inputItem">
          <div class="title">接单城市</div>
          <div class="inputBox">
            <el-cascader
              ref="sysCascader"
              v-model="citySelected"
              :options="newCity"
              @change="handleChange($event)"
              placeholder="不限"
              clearable
              :filterable="true"
            >
            </el-cascader>
          </div>
        </div> -->
            <!-- 查询 -->
            <el-button type="primary" size="small" icon="el-icon-search" @click="getDriverList1">查询</el-button>
            <el-button type="plain" size="small" icon="el-icon-refresh-right" @click="clearUp">清空</el-button>
        </div>
        <div class="main">
            <div class="list" ref="getHeight">
                <el-table :data="records" border style="width: 100%" ref="table1">
                    <el-table-column width="60px" align="center" prop="SerialNumber" label="序号">
                    </el-table-column>
                    <el-table-column align="center" label="司机照片">
                        <template slot-scope="scope">
                            <el-image class="driverPic" :src="scope.row.driverPhoto"
                                :preview-src-list="[scope.row.driverPhoto]">
                            </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="driverName" label="司机姓名">
                    </el-table-column>
                    <el-table-column align="center" label="司机信息" width="220">
                        <template slot-scope="scope">
                            <div style="text-align: left;">
                                <div>司机ID：{{ scope.row.driverId }}</div>
                                <div>手机号：{{ scope.row.phoneNumber }}</div>
                                <div>归属车队：{{ scope.row.fleetName || '无' }}</div>
                                <div>接单城市：{{ scope.row.region }}</div>
                                <div>加入时间：{{ scope.row.createTime }}</div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="车辆信息" width="220">
                        <template slot-scope="scope" v-if="scope.row.numberplate">
                            <div style="text-align:left;">
                                <div>车牌号码：{{ scope.row.numberplate }}</div>
                                <div>车辆品牌：{{ scope.row.brandModel }}</div>
                                <div>车辆名称：{{ scope.row.vehicleType }}</div>
                            </div>
                        </template>
                        <template v-else>
                            <div>'--.--'</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="昨日在线时长">
                        <template slot-scope="scope">
                            <div>{{ scope.row.todayTimes }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" prop="yesterdayBill" label="昨日司机流水">
                        <template slot-scope="scope">
                            <div v-if="scope.row.yesterdayBill">{{ scope.row.yesterdayBill }}</div>
                            <div v-else>无</div>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="司机四要素">
                        <template slot-scope="scope">
                            <div style="text-align:left;">
                                <div>行为分：{{ scope.row.behaviorScore }}</div>
                                <div>准点率：{{ scope.row.punctualityRate }}</div>
                                <div>被收藏数：{{ scope.row.collectNumber }}</div>
                                <div>被拉黑数：{{ scope.row.blacklistNumber }}</div>
                            </div>
                        </template>
                    </el-table-column>

                    <!-- <el-table-column align="center" prop="driverName" label="姓名">
            </el-table-column>
            <el-table-column align="center" prop="phoneNumber" label="手机号">
            </el-table-column>
            <el-table-column align="center" label="准驾车型">
              <template slot-scope="scope" v-if="scope.row.licenseLevel.message">
                <span>{{ scope.row.licenseLevel.message }}</span>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="region" label="接单城市">
            </el-table-column>
            <el-table-column align="center" prop="numberplate" label="绑定车辆">
              <template slot-scope="scope">
                <span>{{ scope.row.numberplate || '--.--' }}</span>
              </template>
            </el-table-column> -->
                    <!-- <el-table-column align="center" prop="vehicleType" label="车型">
              <template slot-scope="scope">
                <span>{{ scope.row.vehicleType || '--.--' }}</span>
              </template>
            </el-table-column> -->
                    <!-- <el-table-column align="center" prop="score" label="积分">
            </el-table-column> -->
                    <!-- <el-table-column align="center" label="认证状态">
              <template slot-scope="scope">
                <div class="stateBtns">
                  <el-button class="Pass" size="small">
                    <i class="iconfont icon-dian"></i>
                    {{ scope.row.certStatus.value == 2 ? "认证通过" : " " }}
                  </el-button>
                </div>
              </template>
            </el-table-column> -->
                    <el-table-column align="center" label="状态">
                        <template slot-scope="scope">
                            <div v-if="scope.row.nowStatus == 1" style="color: #9b9797;">
                                离线
                            </div>
                            <div v-else style="color: #42ec67;">
                                正常
                            </div>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column align="center" prop="todayTimes" label="当日在线时长">
            </el-table-column>
            <el-table-column align="center" prop="allTimes" label="总在线时长">
            </el-table-column> -->


                    <!-- <el-table-column align="center" prop="createTime" label="加入时间"></el-table-column> -->
                    <el-table-column align="center" label="操作">
                        <template slot-scope="scope">
                            <div>
                                <!-- @click="$router.push('/certAudit/details/'+id)" -->
                                <el-button type="text" size="small" v-if="permissions.detail.perms != null"
                                    @click="showDetailBox(scope.row.driverId)">详情</el-button>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <!-- 分页 -->
            <div class="paginationBox">
                <el-pagination @current-change="changePages($event)" class="pagination" background
                    layout="slot,prev, pager, next" :total="data.total * 1" :page-size="data.size * 1" :pager-count="5">
                    <template slot>
                        <span style="
                  color: #686868;
                  font-size: 12px;
                  margin-right: 20px;
                  display: inline-block;
                ">共{{ data.total }}条,每页{{ data.size }}条</span>
                    </template>
                </el-pagination>
            </div>
        </div>

        <!-- 详情弹出 -->
        <div>
            <el-dialog custom-class="zdy_dialog_driverListDetail" width="40%" :visible.sync="VisibleDetail">
                <!-- 头部标题 -->
                <div class="dialog_header" slot="title">
                    <i class="iconfontcolor icon-dairenzhengsiji"></i>
                    <div class="infoBox">
                        <div class="info">
                            <div class="name">{{ DetailsData.driverName }}</div>
                            <div class="tagAudit">已认证</div>
                            <div class="gender">
                                {{ DetailsData.sex == "1" ? "女" : "男" }}
                            </div>
                        </div>
                        <div class="text">
                            <div class="afterLine">司机编号：{{ DetailsData.driverId }}</div>
                            <!-- <div class="afterLine">积分：{{ DetailsData.score }}</div> -->
                            <div>最近登录：2023-05-18 15:42:28</div>
                        </div>
                    </div>
                </div>

                <div class="dialog_body">
                    <!-- 司机信息 -->
                    <div class="title">
                        <i class="iconfontcolor icon-xinxi"></i>
                        <h3>司机信息</h3>
                        <div class="center_line"></div>
                    </div>
                    <el-descriptions :colon="true" :column="2" :contentStyle="{ fontSize: '12px', color: '#262626' }"
                        :labelStyle="{ fontSize: '12px', color: '#939393' }">
                        <el-descriptions-item label="联系电话">{{
                            DetailsData.phoneNumber
                        }}</el-descriptions-item>
                        <el-descriptions-item label="准驾车型">{{
                            DetailsData.licenseLevel.message
                        }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号">{{
                            DetailsData.idCard
                        }}</el-descriptions-item>
                        <el-descriptions-item label="司机年龄">{{
                            DetailsData.age
                        }}</el-descriptions-item>
                        <el-descriptions-item label="接单城市">{{
                            DetailsData.region
                        }}</el-descriptions-item>
                        <el-descriptions-item label="加入车队">{{
                            DetailsData.fleetName ? DetailsData.fleetName : "无"
                        }}</el-descriptions-item>
                        <el-descriptions-item label="加盟时间" span="2">{{
                            DetailsData.createTime
                        }}</el-descriptions-item>
                        <el-descriptions-item label="图片资料" :span="2">
                            <div class="picBox">
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.driverPhoto"
                                        :preview-src-list="[DetailsData.driverPhoto]">
                                    </el-image>
                                    <span>司机照片</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.idCardFront"
                                        :preview-src-list="[DetailsData.idCardFront]">
                                    </el-image>
                                    <span>身份证正面照</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.idCardBack"
                                        :preview-src-list="[DetailsData.idCardBack]">
                                    </el-image>
                                    <span>身份证背面照</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.licensePhoto"
                                        :preview-src-list="[DetailsData.licensePhoto]">
                                    </el-image>
                                    <span>驾驶证照片</span>
                                </div>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <!-- 关联信息 -->
                    <div class="title">
                        <i class="iconfontcolor icon-xinxi"></i>
                        <h3>关联车辆</h3>
                        <div class="center_line"></div>
                    </div>
                    <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
                        :labelStyle="{ fontSize: '12px', color: '#939393' }">
                        <el-descriptions-item label="车辆类型">{{
                            DetailsData.vehicleType
                        }}</el-descriptions-item>
                        <el-descriptions-item label="品牌型号">{{
                            DetailsData.brandModel
                        }}</el-descriptions-item>
                        <el-descriptions-item label="规格">{{
                            DetailsData.specification
                        }}</el-descriptions-item>
                        <el-descriptions-item label="参数">{{
                            DetailsData.vehicleArgs
                        }}
                            #4.2米包含）长（以上需提供道路运输许可证</el-descriptions-item>
                        <el-descriptions-item label="图片资料" :span="2">
                            <div class="picBox">
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.carFortyFive"
                                        :preview-src-list="[DetailsData.carFortyFive]">
                                    </el-image>
                                    <span>车辆照片</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.licensePhoto"
                                        :preview-src-list="[DetailsData.licensePhoto]">
                                    </el-image>
                                    <span>行驶证照片</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.roadTransport"
                                        :preview-src-list="[DetailsData.roadTransport]">
                                    </el-image>
                                    <span>道路运输许可证</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.drivingLicenseCar"
                                        :preview-src-list="[DetailsData.drivingLicenseCar]">
                                    </el-image>
                                    <span>车辆页</span>
                                </div>
                                <div class="pic_item">
                                    <el-image class="pic" :src="DetailsData.roadTransport"
                                        :preview-src-list="[DetailsData.roadTransport]">
                                    </el-image>
                                    <span>道路许可证</span>
                                </div>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                    <!--认证信息  -->
                    <div class="title">
                        <i class="iconfontcolor icon-xinxi"></i>
                        <h3>认证信息</h3>
                        <div class="center_line"></div>
                    </div>
                    <el-descriptions :colon="true" :column="1" :contentStyle="{ fontSize: '12px', color: '#262626' }"
                        :labelStyle="{ fontSize: '12px', color: '#939393' }">
                        <el-descriptions-item label="认证信息">{{
                            auditTime
                        }}</el-descriptions-item>
                        <el-descriptions-item label="认证人">{{
                            auditUser
                        }}</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-dialog>
        </div>
    </div>
</template>
  
<script>
import breadcrumb from "@/components/breadcrumb.vue";
import httpApi from "@/http";
import newCity from "@/common/newCity";

export default {

    data() {
        return {
            pickerOptions: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        picker.$emit('pick', [start, end]);
                    }
                }]
            },
            createTime: [],
            driverName: "",
            phone: "",
            cityValue: "",

            citySelected: "", //这是城市id的值
            citySelectedLabel: "", //城市字符串
            newCity: [],
            records: [], //已认证司机列表数据
            data: {
                size: "",
                total: "",
            }, //全部数据
            DetailsData: {
                licenseLevel: {
                    message: "",
                    value: "",
                },
            },
            auditUser: "", //认证人
            auditTime: "", //认证时间
            pageCurrent: 1, //当前页 默认为1
            size: "10",
            VisibleDetail: false,
            permissions: {}
        };
    },
    created() {
        this.permissions = JSON.parse(sessionStorage.getItem('permissions'))
    },

    methods: {
        getSerialNumber() {
            // 前端解决序号
            this.records.forEach((item, i) => {
                let num = i + 1 + Number(this.size) * (this.pageCurrent - 1);
                item.SerialNumber = num;
            });
        },
        showDetailBox(id) {
            this.VisibleDetail = true;
            let params = { driverId: id };
            // console.log('传参',params);
            // console.log('已认证详情id', id);
            httpApi.driverApi.getWaitAuditDriverDetails(params).then((res) => {
                // console.log(res);
                this.DetailsData = res.data.data;
                // console.log('详情数据', this.DetailsData)
                this.auditUser =
                    this.DetailsData.auditVoList[0].auditVoList[0].auditUser;
                this.auditTime =
                    this.DetailsData.auditVoList[0].auditVoList[0].auditTime;
            });
        },
		getDriverList1() {
			this.pageCurrent = 1;
			this.getDriverList();
		},
        getDriverList() {
            let params = {
                pageCount: this.size,
                current: this.pageCurrent,
                region: this.cityValue,
                phone: this.phone,
                driverName: this.driverName,
                startTime: this.createTime != null ? this.createTime[0] : '', //开始时间
                endTime: this.createTime != null ? this.createTime[1] : '', //结束时间
            };
            // console.log(params);
            httpApi.driverApi.getAuditedDriverList(params).then((res) => {
                // console.log('已认证司机列表', res);
                this.records = res.data.data.records;
                this.getSerialNumber();
                res.data.data.records.forEach(item => {
                    let d = item.todayTimes
                    d = parseInt(d / 1000)
                    console.log(d)
                    // 计算出相差的秒部分，去除相差的数字中含有的60(分钟)
                    let second = d % 60
                    // 计算出相差的分钟，去除相差的数字中含有的小时(3600),单位换算为分钟
                    let minute = parseInt(d % 3600 / 60)
                    // 计算出相差的小时，去除相差的数字中含有的天(24*3600)，单位换算为小时
                    let hour = parseInt(d % (24 * 3600) / 3600)

                    let d2 = item.allTimes
                    d2 = parseInt(d2 / 1000)
                    let second2 = d2 % 60
                    let minute2 = parseInt(d2 % 3600 / 60)
                    let hour2 = parseInt(d2 % (24 * 3600) / 3600)
                    let day = parseInt(d2 / (24 * 3600))
                    item.allTimes = `${day != 0 ? day + '天' : ''}${hour2 != 0 ? hour2 + '小时' : ''}${minute2}分钟`
                    // console.log(`${hour<10?'0'+hour:hour}:${minute<10?'0'+minute:minute}:${second<10?'0'+second:second}`)
                    // :${second<10?'0'+second:second}
                    item.todayTimes = `${hour != 0 ? hour + '小时' : ''}${minute}分钟`
                })

                // console.log('1111', this.records);
                this.data = res.data.data;
            });
        },
        init() {
            this.getDriverList();
        },
        handleChange(val) {
            // console.log(val.length);
            if (val.length != 0) {
                this.citySelected = val;
                var labelArr = this.$refs.sysCascader.getCheckedNodes()[0].pathLabels;
                // console.log(labelArr);
                this.citySelectedLabel = labelArr.join("/");
                // console.log(this.citySelectedLabel);
            }
        },
        clearUp() {
            this.driverName = "";
            this.cityValue = "";
            this.citySelected = "";
            this.citySelectedLabel = "";
            this.phone = "";
            this.createTime = []
			this.pageCurrent = 1;
            this.getDriverList();
        },
        changePages(val) {
            // console.log('页', val);
            this.pageCurrent = val;
            this.getDriverList();
        },
        // 记录滚动距离
        scrollEvent(res) {
            this.$route.meta.scrollTop = res.target.scrollTop
        },
    },
    activated() {
        //组件激活时监听表格滚动条位置,
        this.$refs.table1.bodyWrapper.addEventListener('scroll', this.scrollEvent, false)
        // 激活设置滚动位置
        this.$refs.table1.bodyWrapper.scrollTop = this.$route.meta.scrollTop
    },
    beforeRouteLeave(to, from, next) {
        // 为了节省资源，再离开页面的时候关闭对于scroll事件的监听
        this.$refs.table1.bodyWrapper.removeEventListener('scroll', this.scrollEvent)
        next()
    },


    mounted() {
        this.init();
        this.newCity = newCity; //存储中国三级省市数据
        this.getSerialNumber();
    },
};
</script>
  
<style lang="scss" scoped>
.control {
    height: 76px;
    width: 100%;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 29px;

    .inputItem {
        display: flex;
        align-items: center;
        margin-right: 23px;

        >.title {
            color: #262626;
            font-size: 12px;
            margin-right: 7px;
        }

        >.inputBox {
            width: 160px;

            ::v-deep .el-input__icon {
                line-height: 0;
            }

            ::v-deep .el-input__inner {
                height: 32px;
                font-size: 12px;
            }

            ::v-deep .el-input__inner::placeholder {
                color: #c3c3c3;
                font-size: 12px;
            }
        }
    }
}

.main {
    width: 100%;
    height: calc(100vh - 267px);
    background-color: #fff;

    .list {
        height: calc(100% - 48px);
        padding: 0 30px;

        // 表头样式
        ::v-deep .el-table__body-wrapper {
            height: calc(100vh - 362px);

            overflow-y: scroll;
        }

        ::v-deep .el-table__header th {
            background-color: #f0f6fd;
            color: #262626;
            font-size: 12px;
            font-weight: bold;
            text-align: center;

            // 表 body的td
            ::v-deep .el-table__body td {
                color: #595959;
                font-size: 12px;
            }
        }

        .stateBtns {
            height: 30px;
            width: 76px;
            margin: 0 auto;

            ::v-deep .el-button {
                height: 30px;
                width: 76px;
                font-size: 12px;
                border: none;
                display: flex;
                align-items: center;
                justify-content: center;
                line-height: 30px;
            }

            .Pass {
                background-color: #ecf5fe;
                color: #1890ff;
            }
        }
    }

    .paginationBox {
        border-top: 1px solid #f0f0f0;
        width: 100%;
        background-color: #fff;
        display: flex;
        height: 48px;
        align-items: center;
        padding: 0 30px;

        .pagination {
            margin-left: auto;
        }
    }
}
</style>
  
<style lang="scss">
.zdy_dialog_driverListDetail {
    height: 100vh;
    margin: 0 !important;
    position: fixed;
    right: 0;
    min-width: 500px;
    overflow-y: scroll;

    .dialog_header {
        display: flex;

        >.icon-dairenzhengsiji {
            font-size: 43px;
            color: #1890ff;
        }

        .infoBox {
            margin-left: 13px;

            >.info {
                display: flex;
                margin-bottom: 7px;
                align-items: center;

                >.name {
                    color: #262626;
                    font-size: 18px;
                    margin-right: 8px;
                }

                .tagAudit {
                    background-color: #ecf5fe;
                    font-size: 10px;
                    color: #1890ff;
                    padding: 5px 8px 4px;
                    border-radius: 4px;
                    display: inline-block;
                    margin-right: 6px;
                }

                >.gender {
                    background-color: #ecf5fe;
                    font-size: 10px;
                    color: #1890ff;
                    border-radius: 4px;
                    padding: 4px 7px 3px;
                    display: inline-block;
                }
            }

            .text {
                display: flex;
                color: #939393;
                font-size: 12px;

                .afterLine::after {
                    content: "|";
                    color: #939393;
                    margin-left: 11px;
                    margin-right: 12px;
                }
            }
        }
    }

    .dialog_body {
        >.title {
            height: 60px;
            display: flex;
            align-items: center;

            >.icon-xinxi {
                font-size: 16px;
                margin-right: 7px;
            }

            >h3 {
                font-size: 14px;
                font-family: Microsoft YaHei;
                font-weight: bold;
                color: #262626;
            }

            .center_line {
                flex: 1;
                height: 1px;
                background-color: #f0f0f0;
                margin-left: 14px;
            }
        }

        .picBox {
            display: flex;
            width: 400px;
            overflow-x: scroll;

            .pic_item {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                margin-right: 32px;

                .pic {
                    width: 109px;
                    height: 71px;
                }

                >span {
                    color: #666666;
                    font-size: 12px;
                }
            }
        }
    }
}

.driverPic {
    height: 60px;
    width: 60px;
    object-fit: cover;
}
</style>
  